<template>
  <div 
    class="chess-cell"
    :class="cellClasses"
    @click="handleClick"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <!-- 棋盘线条背景 -->
    <div class="cell-lines" :class="lineClasses"></div>
    
    <!-- 棋子 -->
    <div 
      v-if="piece" 
      class="chess-piece"
      :class="pieceClasses"
    >
      {{ piece.symbol }}
    </div>
    
    <!-- 移动提示点 -->
    <div 
      v-if="showMoveHint"
      class="move-hint"
      :class="{ 'capture-hint': hasEnemyPiece }"
    ></div>
    
    <!-- 选中高亮 -->
    <div v-if="isSelected" class="selection-highlight"></div>
    
    <!-- 上次移动高亮 -->
    <div v-if="isLastMove" class="last-move-highlight"></div>
    
    <!-- 将军警告 -->
    <div v-if="isInCheck" class="check-warning"></div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 棋盘位置
  row: {
    type: Number,
    required: true
  },
  col: {
    type: Number,
    required: true
  },
  
  // 棋子信息
  piece: {
    type: Object,
    default: null
  },
  
  // 状态标记
  isSelected: {
    type: Boolean,
    default: false
  },
  
  isValidMove: {
    type: Boolean,
    default: false
  },
  
  isLastMove: {
    type: Boolean,
    default: false
  },
  
  isInCheck: {
    type: Boolean,
    default: false
  },
  
  // 显示设置
  showCoordinates: {
    type: Boolean,
    default: false
  },
  
  showMoveHints: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['click', 'mouseenter', 'mouseleave']);

// 计算属性
const cellClasses = computed(() => ({
  'cell-selected': props.isSelected,
  'cell-valid-move': props.isValidMove,
  'cell-last-move': props.isLastMove,
  'cell-in-check': props.isInCheck,
  'cell-has-piece': !!props.piece,
  'cell-red-piece': props.piece?.color === 'red',
  'cell-black-piece': props.piece?.color === 'black'
}));

const pieceClasses = computed(() => ({
  [`piece-${props.piece?.color}`]: !!props.piece?.color,
  [`piece-${props.piece?.type}`]: !!props.piece?.type,
  'piece-selected': props.isSelected
}));

const lineClasses = computed(() => {
  const classes = [];
  
  // 九宫格标记
  if (isInPalace.value) {
    classes.push('palace-area');
  }
  
  // 河界标记
  if (props.row === 4 || props.row === 5) {
    classes.push('river-boundary');
  }
  
  // 边界线
  if (props.row === 0) classes.push('top-border');
  if (props.row === 9) classes.push('bottom-border');
  if (props.col === 0) classes.push('left-border');
  if (props.col === 8) classes.push('right-border');
  
  return classes;
});

const isInPalace = computed(() => {
  // 九宫格的四个角点才显示斜线
  return ((props.row === 0 || props.row === 2) && (props.col === 3 || props.col === 5)) ||
         ((props.row === 7 || props.row === 9) && (props.col === 3 || props.col === 5)) ||
         (props.row === 1 && props.col === 4) || // 中心点
         (props.row === 8 && props.col === 4);
});

const showMoveHint = computed(() => {
  return props.showMoveHints && props.isValidMove;
});

const hasEnemyPiece = computed(() => {
  return props.piece && props.isValidMove;
});

// 事件处理
const handleClick = (event) => {
  emit('click', {
    row: props.row,
    col: props.col,
    piece: props.piece,
    event
  });
};

const handleMouseEnter = (event) => {
  emit('mouseenter', {
    row: props.row,
    col: props.col,
    piece: props.piece,
    event
  });
};

const handleMouseLeave = (event) => {
  emit('mouseleave', {
    row: props.row,
    col: props.col,
    piece: props.piece,
    event
  });
};
</script>

<style scoped src="@/styles/chess/ChessCell.scss"></style>
